﻿.slide {
	position : relative;
	overflow : hidden;
}


.slideTab {
	position : absolute;
	top : 0;
	left : 0;
	height : 100%;
	width : 100%;
	z-index : 1;
	box-shadow : 0 0 30px #666;
}
.slideTab[data-switchstatus] {
	z-index : 2;
}
.slideTab[data-switchstatus="0"] {
	-webkit-animation : slideTab linear 300ms 1;
	animation : slideTab linear 300ms 1;
}
.slideTab[data-switchstatus="1"] {
	-webkit-animation : nextSlideTab linear 300ms 1;
	animation : nextSlideTab linear 300ms 1;
}
.slide[data-dir="1"] .slideTab[data-switchstatus="0"] {
	-webkit-animation-name : verticalSlideTab;
	animation-name : verticalSlideTab;
}
.slide[data-dir="1"] .slideTab[data-switchstatus="1"] {
	-webkit-animation-name : nextVerticalSlideTab;
	animation-name : nextVerticalSlideTab;
}


.tiledSlide > .slideTab {
	position : static;
	width : 100%;
	height : 100%;
	-webkit-animation-name : none;
	animation-name : none;
}


.tiledSlide {
	width : auto;
	white-space : nowrap;
}
.tiledSlide:not([data-running]) {
	-webkit-transition : -webkit-transform 200ms;
	transition : transform 200ms;
}


.slideButton {
	position : absolute;
	bottom : 10px;
	left : 0;
	width : 100%;
	height : 6px;
	z-index : 3;
	text-align : center;
}
.slideButton button {
	height : 6px;
	width : 6px;
	border-radius : 100%;
	margin : 0 3px;
	opacity : 0.6;
	vertical-align : top;
}
.slideButton button:hover {
	opacity : 1;
}
.slideButton button[data-focus] {
	background-color : #fb4;
}


@-webkit-keyframes slideTab {
	0% {
		-webkit-transform : translateX(-100%);
	}
	100% {
		-webkit-transform : translateX(0);
	}
}
@keyframes slideTab {
	0% {
		transform : translateX(-100%);
	}
	100% {
		transform : translateX(0);
	}
}

@-webkit-keyframes verticalSlideTab {
	0% {
		-webkit-transform : translateY(-100%);
	}
	100% {
		-webkit-transform : translateY(0);
	}
}
@keyframes verticalSlideTab {
	0% {
		transform : translateY(-100%);
	}
	100% {
		transform : translateY(0);
	}
}

@-webkit-keyframes nextSlideTab {
	0% {
		-webkit-transform : translateX(100%);
	}
	100% {
		-webkit-transform : translateX(0);
	}
}
@keyframes nextSlideTab {
	0% {
		transform : translateX(100%);
	}
	100% {
		transform : translateX(0);
	}
}

@-webkit-keyframes nextVerticalSlideTab {
	0% {
		-webkit-transform : translateY(100%);
	}
	100% {
		-webkit-transform : translateY(0);
	}
}
@keyframes nextVerticalSlideTab {
	0% {
		transform : translateY(100%);
	}
	100% {
		transform : translateY(0);
	}
}